import VueRouter from 'vue-router' //引入路由插件

import Brother from '@/pages/Brother.vue' //引入路由组件
import Child from '@/pages/Child.vue'
import Father from '@/pages/Father.vue'
import GrandSon from '@/pages/GrandSon.vue'
import Uncle from '@/pages/Uncle.vue'

const router = new VueRouter({ //创建并暴露路由规则
    mode: 'history', //hash:/#/及后面不作为参数,打包不需考虑路径问题,兼容性略好，history:/,打包需考虑路径与后端匹配(后端代码或nginx)
    routes: [
        {
            name: 'uncle', //命名路由
            path: '/unclepath', //1级路由路径(要带斜杠)
            component: Uncle, //组件名
            meta: { //路由元信息(自定义:鉴权,页签标题)
                isAuth: true, //鉴权(是)
                title: '兄弟' //标题
            },
            beforeEnter: (to, from, next) => { //独享路由守卫(只有前置,没有后置)
                if (to.meta.isAuth) {
                    if (localStorage.getItem('school') === 'qinghua') {
                        next()
                    } else {
                        alert('学校名不对,无权限查看!')
                    }
                } else {
                    next() //放行
                }
            }
        },
        {
            name: 'father', //命名路由
            path: '/fatherpath', //1级路由路径(要带斜杠)
            component: Father, //组件名
            meta: { //路由元信息(自定义:鉴权,页签标题)
                isAuth: false, //鉴权(否)
                title: '父亲' //标题
            },
            children: [ //2级路由(嵌套路由)
                {
                    name: 'brother', //命名路由
                    path: 'brotherpath', //2级路由路径(不带斜杠)
                    component: Brother, //组件名
                },
                {
                    name: 'child', //命名路由
                    path: 'childpath', //2级路由路径(不带斜杠)
                    component: Child, //组件名
                    meta: { //路由元信息(自定义:鉴权,页签标题)
                        isAuth: false, //鉴权(否)
                        title: '孩子' //标题
                    },
                    children: [ //3级路由(嵌套路由)
                        {
                            name: 'grandSon', //命名路由
                            path: 'grandSonpath', //3级路由路径(不带斜杠),query传参不需占位符
                            // path: 'grandSonpath/:id/:title', //3级路由路径(不带斜杠),params传参字符串占位符
                            component: GrandSon, //组件名
                            //props: {a:1, b:'hello'} //死数据
                            //props: true //将params参数以props传给GrandSon.vue
                            // props($route) { //将参数以props传给GrandSon.vue
                            //     return {id: $route.query.id, title: $route.query.title}
                            // }
                            props({ query: { id, title } }) { //连续解构赋值,将参数以props传给GrandSon.vue
                                return { id, title }
                            }
                        }
                    ]
                }
            ]
        }
    ]
})

router.beforeEach((to, from, next) => { //全局前置路由守卫,初始化和每次路由切换前调用
    if (to.meta.isAuth || to.name === 'uncle' || to.path === '/father/brother') {
        if (localStorage.getItem('school') === 'qinghua') {
            next() //放行
        } else {
            alert('学校名不对,无权限查看!')
        }
    } else {
        next() //放行
    }
})

router.afterEach((to) => { //全局后置路由守卫,初始化和每次路由切换后调用
    document.title = to.meta.title || '商城' //设置页签标题
})

export default router //默认暴露